<style>
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
    }

    .login #login {
        width: 350px;
        min-height: 400px;
    }

    .message {
        width: 100%;
        height: 1vh;
        position: fixed;
        bottom: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 2s;
    }
</style>
<div class="login">
    <div id="login" class="modal-content rounded-4 shadow" style="box-shadow: 0rem 0rem 1rem 2px rgba(0, 0, 0, 0.15) !important;">

        <div class="modal-header p-5 pb-4 border-bottom-0">
            <h1 class="fw-bold mb-0 fs-2">Sign up</h1>
        </div>


        <div class="modal-body p-5 pt-0">

            <div class="form-floating mb-3">
                <input type="text"
                       v-model="phone"
                       class="form-control rounded-3"
                       id="floatingInput"
                       placeholder="+7(xxx)-xxx-xx-xx" />
                <label for="floatingInput">Phone number</label>
            </div>

            <div class="form-floating mb-3">
                <input type="password"
                       v-model="password"
                       class="form-control rounded-3"
                       id="floatingPassword"
                       placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>

            <div v-if="registr" class="form-floating mb-3">
                <input type="password"
                       v-model="passwordConfirm"
                       class="form-control rounded-3"
                       id="ConfirmPassword"
                       placeholder="Repeat password" >
                <label for="floatingPassword">Confirm Password</label>
            </div>

            <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary"
                    @click="sendAuth()"
                    type="submit"
            >{{ buttonText }}</button>
            <small @click="registration()" style="cursor: pointer;" >{{ logInText }}</small>
            <br>
            <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>



        </div>

    </div>

    <div class="message" >
        <div class="alert alert-danger" v-show="exception" role="alert">
            Произошла ошибка - {{ response }}
        </div>
        <div class="alert alert-success" v-show="success" role="alert">
            {{ response }}
        </div>
    </div>
</div>
<script>
    // import axios from "axios";

    var Vue = Vue.createApp({
        data() {
            return {
                registr : false,
                logInText : "Registration",
                buttonText: "Sign Up",
                phone : "",
                password : "",
                passwordConfirm: "",
                response: "123",
                exception: false,
                success: false
            }
        },
        mounted() {
        },
        methods: {
            sendAuth () {
                if (this.registr === false) {
                    console.log("login");
                    console.log(this.password, this.phone)
                    axios.post(`/api/admin/auth`, {
                        "phone": this.phone,
                        "password": this.password
                        })
                        .then((res) => {
                            console.log("OK UserInfo", res.data);
                            this.success = true;
                            this.response = "Авторизация прошла успешно, через 3 секунд вы будете перенаправлены"
                            setTimeout(() => {
                                this.success = false;
                                window.location.replace("/admin/");
                            }, 3000)
                        })
                        .catch((error) => {
                            console.log("Error UserInfo", error);
                            this.exception = true;
                            this.response = error.message
                            console.log(this.exception);
                            setTimeout(() => {
                                this.exception = false;
                            }, 2000)
                        });

                } else {
                    console.log("Registration");

                    if (this.password !== this.passwordConfirm){
                        this.exception = true;
                        this.response = "Пароли не совпадают"
                        console.log(this.exception);
                        setTimeout(() => {
                            this.exception = false;
                        }, 2000)
                    } else {
                        axios.post(`/api/admin/registration`, {
                            "phone": this.phone,
                            "password": this.password,
                            "confirm_password": this.passwordConfirm
                        })
                            .then((res) => {
                                console.log("OK UserInfo", res.data);
                            })
                            .catch((error) => {
                                console.log("Error UserInfo", error.response);
                            });
                    }
                }
            },
            registration () {
                this.registr = !this.registr;
                if (this.registr !== false) {
                    this.logInText = "Or sign in";
                    this.buttonText = "Registration"
                } else {
                    this.logInText = "Registration";
                    this.buttonText = "Sign Up"
                }
            }
        },
    }).mount('.login');
</script>
